<html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加题型</title>
    <script src="js/vue.global.3.5.13.js"></script>
    <script src="js/axios.min.0.24.0.js"></script>
    <script src="js/index.full.js"></script>
    <script src="js/icons-vue.js"></script>
    <script src="js/zh-cn.js"></script>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<div id="app">

    <div style="height: 50px"></div>
    <h2>添加题型</h2>
    <el-form :label-width="100" :rules="rules" :model="type" ref="typeForm">
        <el-form-item label="题型：" prop="typeName">
            <el-input style="width: 300px" placeholder="请输入题型名称" v-model="type.typeName">
                <template #prefix>
                    <el-icon><User/></el-icon>
                </template>
            </el-input>
        </el-form-item>

        <el-form-item label="" >
            <el-button type="primary" @click="addType">添加</el-button>
            <el-button type="info" native-type="reset">重置</el-button>
        </el-form-item>
    </el-form>

</div>
<script>
    var option={
        data(){
            return {
                type:{
                    typeName:undefined,
                },
                rules:{
                    typeName:[
                        {required:true,message:'题型名称不能为空',trigger:'blur'}
                    ],
                }
            }
        },
        methods:{
            addType(){
                let _this=this;
                this.$refs.typeForm.validate(value=>{
                    if(value){
                        axios.post("type/add",_this.type).then(resp=>{
                            if(resp.data.code==200){
                                alert(resp.data.msg);
                            }else{
                                alert(resp.data.msg);
                            }
                        });
                        this.getTableData();
                    }
                });
            }
        }
    }
    var app=Vue.createApp(option);
    for(const[key,component] of Object.entries(ElementPlusIconsVue)){
        app.component(key,component);
    }
    app.use(ElementPlus,{locale:ElementPlusLocaleZhCn});
    app.mount("#app");
</script>
</body>
</html>